<template>

  <div>
    <el-row>
      <el-col>
        <div id="title">
          <i class="el-icon-s-order"></i>
          <b>服务订单</b>
        </div>
      </el-col>
    </el-row>
    <br>
    <!-- 表格主体 -->
    <el-table :data="tableData">
      <el-table-column label="服务名称"
                       prop="servername"
                       align="center"
                       width="150"></el-table-column>
      <el-table-column label="顾客名称"
                       prop="customer"
                       align="center"
                       width="100"></el-table-column>
      <el-table-column label="下单时间"
                       prop="createtime"
                       align="center"
                       width="200"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="预约时间"
                       prop="ordertime"
                       align="center"
                       width="200"
                       :show-overflow-tooltip='true'></el-table-column>
      <el-table-column label="服务价格"
                       prop="price"
                       align="center"
                       width="100"
                       :show-overflow-tooltip='true'></el-table-column>

      <el-table-column label="服务状态"
                       align="center">
        <template slot-scope="td">
          <!-- 已下单 -->
          <el-tag type=""
                  v-if="[0].includes(td.row.result)">已下单</el-tag>
          <!-- 已付款 -->
          <el-tag type="success"
                  v-if="[1].includes(td.row.result)">已付款</el-tag>
          <!-- 商家接单 -->
          <el-tag type="warning"
                  v-if="[2].includes(td.row.result)">已接单</el-tag>
          <!-- 已完成 -->
          <el-tag type="danger"
                  v-if="[3].includes(td.row.result)">已完成</el-tag>
          <!-- 已取消 -->
          <el-tag type="info"
                  v-if="[4].includes(td.row.result)">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="250">
        <template slot-scope="td">
          <!-- 查看 td.row当前这一行的对象 -->
          <el-button type="success"
                     size="mini"
                     @click="show(td.row)">查看</el-button>
          <!-- 修改 -->
          <el-button type="warning"
                     size="mini"
                     v-if="[2,1,0].includes(td.row.result)"
                     @click="update(td.row)">修改</el-button>
          <!-- 取消 -->
          <el-popconfirm title="您确定要取消该订单吗"
                         v-if="[2,1,0].includes(td.row.result)"
                         @confirm="cancleorder(td.$index,td.row)">
            <el-button slot="reference"
                       size="mini">取消</el-button>
          </el-popconfirm>
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     plain
                     v-if="[3,4].includes(td.row.result)"
                     @click="del(td.$index,td.row)">删除</el-button>
          <!-- 删除 -->
          <el-button type="danger"
                     size="mini"
                     plain
                     v-if="[0,1,2].includes(td.row.result)"
                     @click="pay(td.$index,td.row)">支付</el-button>
          <el-button type="danger"
                     size="mini"
                     plain
                     v-if="[0,1,2].includes(td.row.result)"
                     @click="backmoney(td.$index,td.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 查看：对话框 -->
    <el-dialog title="查看详情"
               :visible.sync="dialogVisible"
               width="60%">
      <!-- 使用子组件 -->
      <serverorderdetail :orderdetail="currentOrder"
                         v-if="refresh"></serverorderdetail>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改：对话框 -->
    <el-dialog title="修改订单"
               :visible.sync="updateVisible"
               width="60%">
      <!-- 使用子组件 -->
      <updateorder :updateOrer="currentOrder"
                   v-if="refresh"
                   @closeupdatedialog="commitupdate"></updateorder>
    </el-dialog>

  </div>
</template>

<script>
import serverorderdetail from './serverorderdetail'
import updateorder from './updateorder'
updateorder

import http from '../../../axios_config'


export default {
  data () {
    return {
      dialogVisible: false,//是否显示详情
      updateVisible: false,//是否显示修改
      tableData: [],//表格数据
      currentOrder: {},      //指向当前被选中的order信息
      refresh: true,           //强制刷新子组件
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      size: 1                //每一页大小
    }
  },
  methods: {
    //根据页码查询当前页数据
    findByPage () {
      http.get("http://192.168.11.18:8080/serverOrder/selectServerOrderRebuild?page=" + this.currentPage + "&size=" + this.size)
        .then(res => {
          this.tableData = res.data.data;

          console.log(res.data.data);
          console.log(this.tableData);
          //分页数据
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.pageSize;

        });
    },

    //修改每一页大小
    handleSizeChange (size) {
      console.log("选择" + size);
      this.size = size;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //删除订单
    del (row) {
      http.get("http://192.168.11.18:8080/serverOrder/deleteOrder?id=" + this.tableData[row].id)
        .then(res => {
          console.log(res.data);
          if (res.data.statusCode == "200") {
            console.log("删除订单id=" + row);
            this.$notify({
              title: '成功',
              message: '该服务已成功删除！',
              type: 'success'
            });
          }
          this.tableData = [];
          this.findByPage();
        });
    },

    //取消订单
    cancleorder (row) {

      //   发送请求实现取消订单
      http.get("http://192.168.11.18:8080/serverOrder/cancleOrder?id=" + this.tableData[row].id)
        .then(res => {
          if (res.data.statusCode == "200") {
            console.log(res.data);
            this.findByPage();
          }
        });
    },
    //修改订单
    update (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //查看当前被选中的suggest
      this.currentOrder = row;
      //显示对话框
      this.updateVisible = true;
    },
    //查看
    show (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //查看当前被选中的suggest
      this.currentOrder = row;
      //显示对话框
      this.dialogVisible = true;

    },
    //提交修改
    commitupdate (data) {
      this.updateVisible = false;
      if (data.result) {
        data = data.data;
        console.log(data);
        let serverOrder = {
          id: data.id,
          customer: data.customer,
          phone: data.phone,
          address: data.address,
          time:data.ordertime
        };
        
        http.post("http://192.168.11.18:8080/serverOrder/updateServerOrder", serverOrder)
          .then(res => {
            if (res.data == true) {
              console.log(res.data);
              this.findByPage();
            }
          });
      } else {

      }

    },

    pay (row) {

      let payorder = this.tableData[row]
      payorder.createtime = null;
      payorder.ordertime = null;
      console.log(payorder);
      http.post("http://192.168.11.18:8080/alipay/pay", payorder)
        .then(res => {
          document.write(res.data)
        });

    },

    backmoney (row) {

    },


    //时间转换器
    getTime (time) {
      console.log(typeof (time));
      let a = Number(time);
      let aa = new Date(parseInt(a))
      let dd = new Date(aa);
      let y = dd.getFullYear() + '-';
      let M = dd.getMonth() + 1;
      if (M < 9) {
        M = '0' + M + '-'
      } else {
        M += '-'
      }
      let d = dd.getDate();
      if (d < 10) {
        d = '0' + d + ' '
      } else {
        d += ' '
      }

      let h = dd.getHours();
      if (h < 10) {
        h = '0' + h + ':';
      } else {
        h += ':'
      }
      let m = dd.getMinutes();
      if (m < 10) {
        m = '0' + m + ':';
      } else {
        m += ':'
      }

      let s = dd.getMinutes();
      if (s < 10) {
        s = '0' + s;
      }
      let datetime = y + M + d + h + m + s;
      console.log(datetime);
      return datetime;
    },

  },
  //组件加载完成后调用方法
  mounted () {
    console.log("13");
    this.currentPage = 1;
    this.size = 10;
    this.findByPage();
  },
  //当前组件创建完毕时
  components: {
    serverorderdetail,
    updateorder,
  }
}
</script>

<style scoped>
#title {
  margin-left: 10px;
  font-size: 20px;
}
</style>